<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        list-style:none;
        }

        #mian{
            width: 350px;
            height: 350px;
            position: relative;
        }
        #small{
            width: 350px;
            height: 350px;
            border: 1px solid #000;
            
        }
        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255,255,0,.4);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        
        #big{
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            position: absolute;
            top: 0;
            left:360px;
            overflow: hidden;
            display: none;
        }
        #big img{
            position: absolute;
        }
    </style>
</head>
<body>
<div id="mian">
    <div id="small">
        <span id="mask"></span>
        <img src="image/pic001.jpg" alt="">
    </div>
    <div id="big">
        <img src="image/pic01.jpg" alt="">
    </div>
</div>
</body>
<script>
    window.onload = function(){
        var mian = document.getElementById('mian');
        var small = document.getElementById('small');
        var mask = document.getElementById('mask');
        var big = document.getElementById('big');
        var img = big.children[0];
//        console.log(img);

        small.onmouseover = function () {

            mask.style.display = 'block';
            big.style.display = 'block';
        };

        small.onmousemove = function (event) {
            //兼容even事件 even事件（获取当前光标在文档的XY坐标）
            var myEvent = event||window.event;
            //获取当前在盒子里面的X，Y坐标
            //坐标计算 = 当前鼠标的坐标 - 小盒子的宽/高 - 移动光标的宽高一般（保证鼠标在移动光标中间）
            var x = myEvent.clientX-small.offsetLeft-mask.offsetWidth/2;
            var y = myEvent.clientY-small.offsetTop-mask.offsetHeight/2;

            if(x <0){
                x = 0;
            }
            else if(x>=small.offsetWidth-mask.offsetWidth)
            {
                x = small.offsetWidth - mask.offsetWidth;
            }
            if(y <0){
                y = 0;
            }
            else if(y>=small.offsetHeight-mask.offsetHeight)
            {
                y = small.offsetHeight-mask.offsetHeight;
            }

            //mask位置移动
                mask.style.top = y +'px';
//                 console.log(mask.style.left);
                mask.style.left = x +'px';

            //让大图片随小图片放大
            //计算公式，小盒子的XY坐标/（小盒子的宽高/大盒子的宽高）
            img.style.top = - y/(small.offsetHeight/big.offsetHeight) + 'px';
            img.style.left = - x/(small.offsetWidth/big.offsetWidth) + 'px';
//            console.log(big.offsetWidth)
        };

        small.onmouseout = function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        }

    }
</script>
</html>